<template>
	<view class="inner-section">
		
		<view class="common-normal-box">
			<view class="normal-tag-top">
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">班级信息</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
			<view class="class-goods">
				<view class="column-col">
					<view class="orientation">班级第一风采</view>
					<view class="orientation-detail hack-scroll">
						<swiper class="swiper" circular  :autoplay="true" :interval="6000" :duration="500">
							<swiper-item v-for="(item,index) in classroomList" :key="index">
								<view class="swiper-class" >
									<image :src="item.url" class="swiper-img" mode="widthFix"></image>
									<view class="slog-column">
										<view class="small-box">
											<text>班级口号</text>
											<text class="min">{{item.slogan}}</text>
										</view>
										<view class="small-box">
											<text>班歌</text>
											<text class="min">{{item.bansong}}</text>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					
					
				</view>
				<view class="column-col bg-home">
					<view class="orientation">作业布置展示</view>
						<view class="orientation-detail ">
							
							<swiper class="swiper" :indicator-dots="true" circular  :autoplay="true" :interval="15000" :duration="500">
								<swiper-item v-for="(item,index) in homeworkList" :key="index">
										<view  class="home-work">
											<view class="text-info">
												 <text>标题</text> {{ item.title }}
											</view>
											<view class="text-info">
												 <text>类型</text> {{ item.resoun }}
											</view>
											<view class="text-info">
												 <text>内容</text> {{ item.content }}
											</view>
											<view class="text-info">
												 <text>发布日期</text> {{ item.offTime }}
											</view>
											<view class="text-info">
												 <text>提交日期</text> {{ item.createT }}
											</view>
										</view>
									
								</swiper-item>
							</swiper>
	
						</view>
				
				</view>
			</view>
		</view>	
		<view class="common-normal-box patch-small-width">
			<view class="normal-tag-top">
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">老师风采</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
			<Teacher></Teacher>
		</view>
		
		<view class="common-normal-box ">
			<view class="normal-tag-top">
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">通知公告</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
			<view class="notice-section">
				<view class="img-notice">
					<image v-if="baseImgURL" :src="baseImgURL+'/classroom.png'" mode="widthFix" ></image>
				</view>
				<view class="outer">
					<view class="menu-switch">
						<text :class="{'actived':noticeKind==1}" @click="updateMenu(1)">班内公告</text>
						<text :class="{'actived':noticeKind==2}" @click="updateMenu(2)">校园公告</text>
					</view>
					<view class="switch-content" v-if="noticeKind==1">
						 <view  v-for="(item,index) in classNotice" :key="index" @click="showModal(item)">{{index+1}}. {{item.title}} </view>
					</view>
					<view class="switch-content" v-if="noticeKind==2">
						 <view  v-for="(item,index) in schoolNotice" :key="index" @click="showModal(item)">{{index+1}}. {{item.title}}</view>
					</view>
				</view>
				
			</view>
		</view>	
		
		<view class="common-small-box special-column">
			 <view class="mini-box">
			 	<text class="min-title">上课倒计时</text>
				 <countDownTime></countDownTime>
			 </view>	
			 <view class="mini-box">
			 	<text class="min-title">今日值日</text>
				<onDuty></onDuty>
			 </view>
			 <view class="mini-box">
			 	<text class="min-title">班级评比</text>
				<classCompare></classCompare>
			 </view>
		</view>	
		
		<PopWindow :title="titleNotice"  :visible.sync="showNotice"  width="403rpx" height="235rpx"> 
		 <template v-slot:content>
			 <view class="notice-content">
			 	<rich-text :nodes="contentNotice"></rich-text>
			 </view>
		 </template>
		
		</PopWindow>	
	</view>
			
</template>

<script>
	import Teacher from '../Teacher/Teacher.vue'
	import countDownTime from '../countDownTime/countDownTime.vue'
	import onDuty from '../onDuty/onDuty.vue'
	import classCompare from '../classCompare/classCompare.vue'
	import PopWindow from '../PopWindow/PopWindow.vue'
	import { fetchData } from '../../utils/request'
	import  {mapState} from 'vuex'
	
	export default {
		name:"HomePage",
		data() {
			return {
				classroomList:[], // 班级图片:
				homeworkList:[],  //作业
				classNotice:[], //班级通知
				schoolNotice:[], //校园通知
				noticeKind:1, // 通知类型
				showNotice:false,
				titleNotice:'',
				contentNotice:'' 
			};
		},
		computed:{
			...mapState(['classId','baseImgURL','schoolId'])
		},
		components:{
			Teacher,
			countDownTime,
			onDuty,
			classCompare,
			PopWindow
		},
		methods: {
			// 班级风采
			async gradeListApi(){
				let res = await fetchData({
				        url:'/database/school/api/photoList?classId='+this.classId,
				        method:'post'
				 })
				 if(res.code==200){
					 console.log(res.data);
					 this.classroomList = res.data;
				 }
			},
			
			
			// 作业列表
			async getHomework(){
				 let res = await fetchData({
				        url:'/database/work/api/list',
				        method:'GET'
				    })
				this.homeworkList = res.rows;
			},
			
			updateMenu(kind){
				this.noticeKind = kind;
			},
			// 班级通知
			async getClassNotice(){
				let res = await fetchData({
				        url:`/database/classInfo/api/selectClassNotice?classId=${this.classId}`,
				        method:'GET'
				    })
				
				this.classNotice = res.rows;
			},
			//校园通知
			async getSchoolNotice(){
				let res = await fetchData({
				        url:`/database/school/api/selectSchoolMsgList`,
						data:{
							schoolId:this.schoolId
						},
				        method:'GET'
				    })
				
				this.schoolNotice = res.rows;
			},
			showModal(item){
				this.showNotice = true;
				this.titleNotice = item.title;
				this.contentNotice = item.content;
			},
			hideModal(){
				this.showNotice = false;
			}
		},
		mounted(){
			this.gradeListApi();
			this.getHomework();
			this.getClassNotice();
			this.getSchoolNotice();
			console.log('ooooooooo++++++++++');
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height:100%;
	}
	.swiper-img {
		height: 70.44upx!important;
		margin-right: 7.81upx;
	}
	.patch-small-width {
		width: 235.16upx;
	}
.notice-content {
	font-size:7.81upx;
	line-height: 17.63upx;
	margin-top:20.63upx;

}
</style>